import React from 'react';

import ShowItem from './view/ShowTodo';
import AddTodo from './view/AddTodo';

import './assets/less/common.less';
import './assets/less/app.less';

class App extends React.Component {
	constructor() {
		super();
		this.state = {
			data: []
		};
	}
	
	toogleItem(index) {
		let data = this.state.data.map((item, i) => {
			if (index == i) {
				item.completed = !item.completed;
			}
			return item;
		})
		this.setState({
			data: data
		})
	}
	
	onDelete(index) {
		let data = this.state.data.filter((item, i) => {
			return i != index
		})
		this.setState({
			data: data
		})
	}
	
	addTodo(text) {
		this.setState({
			data: [...this.state.data, {
				text: text,
				completed: false
			}]
		})
	}
	
	render() {
		console.log(123)
		const completedItems = this.state.data.filter((item, i) => {
			item.index = i;
			return item.completed;
		})
		const uncompletedItems = this.state.data.filter((item, i) => {
			item.index = i;
			return !item.completed
		})
		return (
			<div className='app-body'>
				<AddTodo addTodo={this.addTodo.bind(this)} />
				<ShowItem items={uncompletedItems} title='未完成' onDelete={this.onDelete.bind(this)} toogleItem={this.toogleItem.bind(this)} />
				<ShowItem items={completedItems} title='已完成' onDelete={this.onDelete.bind(this)} toogleItem={this.toogleItem.bind(this)} />
			</div>
			
		)
	}
}

export default App;